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 AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page