Skip to main content

Twitter feed widget for django-fluent-contents

Project description

fluentcms-twitterfeed
=====================

Twitter feed widget for django-fluent-contents

Installation
============

First install the module, preferably in a virtual environment. It can be installed from PyPI:

.. code-block:: shell

pip install fluentcms-twitterfeed


Backend Configuration
---------------------

First make sure the project is configured for django-fluent-contents_.

Then add the following settings:

.. code-block:: python

INSTALLED_APPS += (
'fluentcms_twitterfeed',
)

The database tables can be created afterwards:

.. code-block:: shell

python ./manage.py migrate

Now, the ``TwitterSearchPlugin`` and ``TwitterRecentEntriesPlugin``
can be added to your ``PlaceholderField`` and ``PlaceholderEditorAdmin`` admin screens.

Frontend Configuration
----------------------

Make sure that all plugin media files are exposed by django-fluent-contents_:

.. code-block:: html+django

{% load fluent_contents_tags %}

{% render_content_items_media %}

This tag should be placed at the bottom of the page, after all plugins
are rendered. For more configuration options - e.g. integration with
django-compressor - see the `template tag documentation
<http://django-fluent-contents.readthedocs.org/en/latest/templatetags.html#frontend-media>`_.

CSS Code
~~~~~~~~

The stylesheet code is purposefully left out, since authors typically like to provide their own styling.

JavaScript Code
~~~~~~~~~~~~~~~

No configuration is required for the JavaScript integration.

By default, the plugin includes all required JavaScript code.

HTML code
~~~~~~~~~

If needed, the HTML code can be overwritten by redefining
``fluentcms_twitterfeed/recent_entries.html`` add / or ``fluentcms_twitterfeed/search.html``.

Usage
-----

TwitterRecentEntriesPlugin
##########################

For this plugin it's not necessary to create a widget for every plugin in your
website; you could just consider the widget you create on the Twitter website
as *templates* for this django CMS plugin:

##############################
Create the twitter-side widget
##############################

#. Login in your twitter account;
#. Go to https://twitter.com/settings/widgets;
#. Create new widget;
#. Select "**user timeline**" as source;
#. Configure the options (theme, colours etc) as described in https://dev.twitter.com/docs/embedded-timelines;
#. Create widget;
#. get the value of ``data-widget-id`` in the embed code;

#####################
Plugin instances data
#####################

``data-widget-id`` value can be shared by any number of plugins instances, the
plugin-provided user timeline will be shown, while the twitter widget graphics
appearance will be used.

#. Add or edit the **Twitter** plugin in you placeholders;
#. Fill in the Twitter widget it field using the ``data-widget-id`` value from
the previous step;
#. Save the plugin;


TwitterSearchPlugin
###################

The twitter widget used by this plugin is entirely configured on the twitter
website.

##############################
Create the twitter-side widget
##############################

#. Login in your twitter account;
#. Go to https://twitter.com/settings/widgets;
#. Create new widget;
#. Select "**Search**" as source;
#. Configure the search query;
#. Configure the options (theme, colours etc) as described in https://dev.twitter.com/docs/embedded-timelines;
#. Create widget;
#. get the value of ``data-widget-id`` in the embed code;

#####################
Plugin instances data
#####################

#. Add or edit the **Twitter Search** plugin in you placeholders;
#. Fill in the Twitter widget it field using the ``data-widget-id`` value from
the previous step;
#. Optionally fill-in the query field in the plugin form; this is only used for
non-javascript enabled browser, as the ``data-widget-id`` will take over on
javascript-enabled ones;
#. Save the plugin;

Contributing
------------

If you like this module, forked it, or would like to improve it, please let us know!
Pull requests are welcome too. :-)

.. _django-fluent-contents: https://github.com/edoburu/django-fluent-contents

Project details


Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page